import {
  View,
  requireNativeComponent,
  StyleSheet,
  ViewStyle
} from 'react-native';
import React, { ReactElement } from 'react';
import { isIOS } from '../../constant';

const RCTSajjadBlurOverlay = requireNativeComponent('RCTBlur');

const styles = StyleSheet.create({
  style: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    backgroundColor: isIOS ? 'rgba(9, 13, 21, 0.25)' : 'rgba(9, 13, 21, 0.6)'
  }
});

type Children = ReactElement | null | string | number;

export default ({
  customStyles,
  children,
  radius = isIOS ? 3 : 40,
  downsampling = 2,
  brightness = 0,
  blurStyle = isIOS ? 'light' : 'dark',
  ...props
}: {
  brightness?: number;
  radius?: number;
  downsampling?: number;
  blurStyle?: string;
  vibrant?: boolean;
  customStyles?: ViewStyle;
  children?: Children | Children[];
}): ReactElement => {
  return (
    <View style={styles.style}>
      <RCTSajjadBlurOverlay
        radius={radius}
        downsampling={downsampling}
        brightness={brightness}
        blurStyle={blurStyle}
        {...props}
        style={[customStyles, styles.style]}
      >
        <View style={[customStyles, styles.style]}>{children}</View>
      </RCTSajjadBlurOverlay>
    </View>
  );
};
